import React from 'react'

import './index.css'

class Footer extends React.Component {
  toggleTodoItemChecked = event => {
    console.log(7, event.target.checked)
    this.props.toggleCheckedTodoItem(event.target.checked)
  }

  handleTodoItemDone = () => {
    this.props.clearDoneTodoItem()
  }

  render() {
    const { todos } = this.props
    const done = todos.filter(item => item.done).length
    const total = todos.length

    return (
      <div className="form-check mt-2">
        <input
          className="form-check-input"
          type="checkbox"
          checked={done === total && total > 0 ? true : false}
          onChange={this.toggleTodoItemChecked}
        />
        <label className="form-check-label">
          {done}完成/{total}总数
        </label>
        <button className="btn btn-sm btn-danger" onClick={this.handleTodoItemDone}>
          清除所有完成
        </button>
      </div>
    )
  }
}

export default Footer
